<template>
  <div id="operStatisticsOnline" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">运营管理</BreadcrumbItem>
				<BreadcrumbItem to="/operation/statisticsOnline">在线统计</BreadcrumbItem>
			</Breadcrumb>
		</div>
    <div class="main">
      <Card dis-hover>
        <div slot="title">最近24小时在线趋势图</div>
        <div slot="extra">
          <span>注册司机总数：{{regDriverTotal}}人</span>
        </div>
        <div id="chart1" style="height:400px; width:100%"></div>
      </Card>
      <Card dis-hover style="margin-top:20px;">
        <div slot="title">在线时长统计</div>
        <div slot="extra" style="width:630px;">
          <Form :label-width="80">
            <Row :gutter="24">
              <Col :md="8">
                <span>在线时长累计：{{onlineTimeTotal}}小时</span>
              </Col>
              <Col :md="12" style="margin-top:-10px;">
                <Button :type="`${searchForm.type===1?'primary':'default'}`" @click="changeType(1)">最近30天</Button>
                <Button :type="`${searchForm.type===2?'primary':'default'}`" @click="changeType(2)">月</Button>
                <Button :type="`${searchForm.type===3?'primary':'default'}`" @click="changeType(3)">年</Button>
                <DatePicker v-model="searchForm.dpDate" :type="dpType" :readonly="dpIsReadonly" :disabled="dpIsDisabled" :clearable="false" placement="bottom-end" transfer style="width:120px;"></DatePicker>
              </Col>
              <Col :md="4" style="margin-top:-10px;">
                <Button type="primary" class="search-btn" icon="search" @click="searchOnlineTime()" long>查询</Button>
              </Col>
            </Row>
          </Form>
        </div>
        <div id="chart2" style="height:400px; width:100%"></div>
      </Card>
    </div>

  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment from 'moment'
  import EChart from '@/plugin/EChart'

  export default {
    data(){
      return {
        regDriverTotal: 0,
        onlineTimeTotal: 0,

        chart1:null,//24小时趋势图报表
        chart2:null,//在线时长统计报表
        chart1Option:{},
        chart2Option:{},

        xOnlineNumberItem:[],//在线人数x轴封装
        seriesOnlineNumberItem:[],//在线人数数据封装

        xOnlineTimeItem:[],//在线时长x轴封装
        seriesOnlineTimeItem:[],//在线时长数据封装

        searchForm:{type:1, date:'', dpDate:null},
        dpIsDisabled:true,
        dpIsReadonly:true
      };
    },
    watch:{
      onlineNumber(v){
        this.regDriverTotal = v.registerCount;
        for (let it of v.onlineList) {
          this.xOnlineNumberItem.push(moment(it.statTime).format('H:00'));
          let item = {'tipDate':moment(it.statTime).format('YYYY年M月D日 H点'),'value':it.onlineCount};
          this.seriesOnlineNumberItem.push(item);
        }
        //设置chart1的option值
        this.chart1Option = {
          title:{show:false},
          color:['#00CC00'],
          grid:{
            top:10,right:0,bottom:30,left:50
          },
          tooltip:{
            trigger: 'axis',
            formatter:(params)=>{
              let tooltiphtml = '';
              let xname = params[0].data.tipDate;
              tooltiphtml += `${xname}`;
              params.forEach(o => {
                tooltiphtml += `<br/>${o.seriesName}：${o.value}`;
              });
              return tooltiphtml;
            }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel:{interval:0,rotate:25},
              data: this.xOnlineNumberItem
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              name: '在线人数',
              type: 'line',
              areaStyle: {},
              data: this.seriesOnlineNumberItem
          }]
        };
        this.createChart1();
      },
      onlineTime(v){
        this.onlineTimeTotal = v.totalOnlineTime!==null?(v.totalOnlineTime===0?0:(v.totalOnlineTime/3600).toFixed(2)):'--';
        let xItemTmp = [];
        let seriesItemTmp = [];
        if(v.onlineDurationList){
          v.onlineDurationList.forEach((it)=>{
            let time = it.date.length>6?it.date:it.date.substring(5,it.date.length);
            time = time.substring(5,time.length);
            xItemTmp.push(time);
            let item = {'tipDate':it.date,'value':it.onlineTime?(it.onlineTime/3600).toFixed(2):'0'};
            seriesItemTmp.push(item);
          });
        }
        this.xOnlineTimeItem = xItemTmp;
        this.seriesOnlineTimeItem = seriesItemTmp;
        this.chart2Option = {
          title:{show:false},
          color:['#00CC00'],
          grid:{
            top:10,right:0,bottom:50,left:50
          },
          tooltip:{
            trigger: 'axis',
            formatter:(params)=>{
              let tooltiphtml = '';
              let xname = params[0].data.tipDate;
              tooltiphtml += `${xname}`;
              params.forEach(o => {
                tooltiphtml += `<br/>${o.seriesName}：${o.value}小时`;
              });
              return tooltiphtml;
            }
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLabel:{interval:0,rotate:25},
              data: this.xOnlineTimeItem
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              name: '在线时长合计',
              type: 'line',
              smooth:true,
              data: this.seriesOnlineTimeItem
          }]
        };
        this.createChart2();
      }
    },
    computed:{
      ...mapState('operation/statisticsOnline',['isLoading','onlineNumber','onlineTime']),
      dpType(){
        this.searchForm.dpDate = null;
        if(this.searchForm.type===1){
          this.dpIsDisabled = true;
          this.dpIsReadonly = true;
        } else {
          this.dpIsDisabled = false;
          this.dpIsReadonly = false;
          let dpType = this.searchForm.type===2?"month":"year";
          this.searchForm.dpDate = this.searchForm.type===2?moment().format('YYYY-MM'):moment().format('YYYY');
          return dpType;
        }
      }
    },
    methods:{
      ...mapActions('operation/statisticsOnline',['loadOnlineNumber','loadOnlineTime']),
      createChart1(){
        if(this.chart1===null){
          this.chart1 = new EChart("chart1",this.chart1Option);
        } else {
          this.chart1.setOption(this.chart1Option);
        }
      },
      createChart2(){
        if(this.chart2===null){
          this.chart2 = new EChart("chart2",this.chart2Option);
        } else {
          this.chart2 = new EChart("chart2",this.chart2Option);
        }
      },
      changeType(t){
        this.searchForm.type = t;
      },
      searchOnlineTime(){
        if(this.searchForm.type!==1 && this.searchForm.dpDate === null){
          this.$Message.error('必须选择时间');
          return;
        }
        if(this.searchForm.type!==1){
          this.searchForm.date = this.searchForm.type===2?moment(this.searchForm.dpDate).format('YYYY-MM'):moment(this.searchForm.dpDate).format('YYYY');
        }
        this.loadOnlineTime(this.searchForm);
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.loadOnlineNumber();
        this.loadOnlineTime(this.searchForm);
      });
    },
    destroyed(){
      this.chart1.dispose();
      this.chart2.dispose();
    }
  }
</script>
